<template>
  <div class="insertHouses">
      <div class="insertHouses-header">
        <!-- <h1 class="header-title">楼盘</h1> -->
         <div class="meal-market-page-box" @click="selectedRadioHouse">
          <div class="meal-market-page-box-top-insert">
            <!-- <span class="icon-check" :class="statusClassCompute" @click="clickHandler"></span> -->
            <div class="meal-market-page-box-top-left bg_img" :style="{backgroundImage:'url('+inlayHouseData.linkerUrl+')'}">
            </div>
            <ul>
              <li>
                <div>{{inlayHouseData.linkerName}}</div>
              </li>
              <li>{{inlayHouseData.site}}<span v-if="inlayHouseData.buildArea"> | {{inlayHouseData.buildArea}}</span></li>
              <li>
                <div class="tag-item-statu blue" v-if="0===inlayHouseData.saleStatus">{{status[inlayHouseData.saleStatus]}}</div>
                <div class="tag-item-statu red" v-if="1===inlayHouseData.saleStatus">{{status[inlayHouseData.saleStatus]}}</div>
                <div class="tag-item-statu gary" v-if="3===inlayHouseData.saleStatus">{{status[inlayHouseData.saleStatus]}}</div>
                <!-- <div class="tag-item" v-if="data&&data.condition&&data.condition!==''" v-for="(item,index) in data.condition.slice(0,1)" :key="index">{{item}}</div> -->
              </li>
              <li class="market_price">{{inlayHouseData.price}}</li>
            </ul>
          </div>
          <span class="insertHouses-radio" :class="{'insertHouses-radio-ative':selectedHouse}"></span>
        </div>
      </div>
      <div class="insertHouses-section">
        <div class="house-tab scale-1px-hairline--tab-bottom">
          <span class="house-tab-item" :class="{'house-tab-active':tabIndex==2}" @click="tabHander(2)">海报</span>
          <span class="house-tab-item" :class="{'house-tab-active':tabIndex==0}" @click="tabHander(0)">图文</span>
          <span class="house-tab-item" :class="{'house-tab-active':tabIndex==1}" @click="tabHander(1)">视频</span>
          <span class="underline" ref="underline"></span>
        </div>
        <div class="insertHouses-wrapper">
          <div class="insertHouses-tips">海报、图文、视频仅可选择1种</div>
          <div class="insertHouses-lists-img" v-show="tabIndex == 2&&total!=0&&posterList">
            <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad">
            <div class="list" v-for="(item,index) in posterList" :key="index" :class="{'list-selected':index==selectedIndex&&selectPosterDb}" @click="selectPoster(index,2)">
              <img class="poster-img" :src="item.content">
              <span class="insertHouses-radio insertHouses-radio-position" :class="{'insertHouses-radio-ative':index==selectedIndex&&selectPosterDb}"></span>
            </div>
            </van-list> 
          </div>
          <div class="insertHouses-lists-pagaraph" v-show="tabIndex == 0&&total!=0&&pagaraphLists">
            <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad">
            <div class="pagaraph-list" v-for="(item,index) in pagaraphLists" :key="index" @click="selectPagaraph(index,0)">
              <div class="pagaraph-list-content">
                <div class="pagaraph-content">
                  <p class="pagaraph-title">{{item.title}}</p>
                  <p class="pagaraph-timer">更新时间：{{item.createTime}}</p>
                </div>
                <img class="pagaraph-img" :src="item.coverImgUrl" alt="">
              </div>
              <span class="insertHouses-radio" :class="{'insertHouses-radio-ative':index==selectPagaraphIndex&&selectPagaraphDb}"></span>
            </div>
            </van-list> 
          </div>
          <div class="insertHouses-lists-vedio" v-show="tabIndex == 1&&total!=0&&vedioLists">
            <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad">
            <div class="vedio-list" v-for="(item,index) in vedioLists" :key="index" @click="selectVedio(index,1)">
              <div class="editVedio">
                <div class="editVedio-box">
                  <div class="editVedio-content" :style="'background-image: url('+item.coverImgUrl+')'">
                    <img class="vedio-play" alt="" src="">
                    <div class="editVedio-info">
                      <p class="editVedio-title">{{item.title}}</p>
                      <p class="editVedio-titme">
                        <span>更新时间：{{item.updateTime}}</span>
                        <span>{{item.content | getVedioTimes}}</span>
                      </p>
                    </div>
                    <div class="editVedio-mask"></div>
                  </div>
                </div>
              </div>
              <span class="insertHouses-radio insertHouses-vedio-position" :class="{'insertHouses-radio-ative':index==selectVedioIndex&&selectVedioDb}"></span>
            </div>
            </van-list> 
          </div>
          <div class="insertHouses-no" v-show="total==0">
            <img :src="noImg" class="no-img" alt="">  
            <p class="no-content">{{noContent}}</p>
          </div> 
        </div>
      </div>
      <!-- 浮动栏 -->
      <div class="fixed-bar">
        <div class="bar-save-btn" @click="cancleClickHandler()">取消</div>
        <div class="bar-share-btn" @click="saveClickHandler()">确定</div>
      </div>

      <!-- 引导 -->
      <comm-dialog :show.sync="showGuide" @closeGuide = "closeGuide">
        <img :src="tabGuide" class="tabGuide" alt="">
        <img :src="tabOverGuide" class="tabOverGuide" alt="">
      </comm-dialog>

  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import EditVedio from 'COMP/Discover/edit/editVedio'
import TagGroup from 'COMP/TagGroup/'
import discoverService from 'SERVICE/discoverService'
import commDialog from 'COMP/Dialog/commDialog'

export default {
  data:()=>({
    tabGuide:require('IMG/guide/guide_tab.png'),
    tabOverGuide:require('IMG/guide/guide_tab_over.png'),
    showGuide:false,//显示引导
    selectedIndex:-1,
    selectPagaraphIndex:-1,
    selectVedioIndex:-1,
    selectedHouse:true,//是否选中楼盘
    tabIndex:2,//应用素材类型：0-图文 1-视频 2-海报
    saveTabIndex:-1,
    loading: false,
    finished: false,
    total:2,
    noPoster:require('IMG/discover/no-poster.png'),
    noPosterTxt:"暂无海报素材",
    noParagraph:require('IMG/discover/no-paragraph.png'),
    noParagraphTxt:"暂无图文素材",
    noVeido:require('IMG/discover/no-veido.png'),
    noVeidoTxt:"暂无视频素材",
    noImg:"", //无数据img
    noContent:"",//无数据内容
    vedioImgUrl:"https://720ljq2-10037467.file.myqcloud.com/linker/administrator/71f8ddc1fa8d45b5811afc4c72e37540.png",
    posterList:[],//海报列表
    pagaraphLists:[],//图文列表
    vedioLists:[],//视频列表
    currentStatus: false, // 当前存储是否选中
    status: ['在售', '待售', '', '售罄'],
    inlayHouseData:{"linkerId":"000907d1-5705-4bf1-8d4f-48410af3d1e6","linkerUrl":"https://720ljq2-10037467.file.myqcloud.com/linker/administrator/71f8ddc1fa8d45b5811afc4c72e37540.png","sale":"9.8","promotionalLanguage":"啊啊啊啊fd啊啊1234啊啊啊啊啊啊啊啊","linkerName":"三亚-海韵半岭温泉","site":"北京市 海淀区","condition":["文旅大盘","豪华社区"],"open":"13次开通","saleStatus":0,"disabled":false,"divisionRules":"","price":" 13000 元/㎡","buildArea":"","isFree":"127","cpActivityVo":""},
    size:10,
    current:1,
    posterCurrent:1,
    paragraphCurrent:1,
    vedioCurrent:1,
    posterTotal:2,
    paragraphTotal:2,
    vedioTotal:2,
    selectPosterDb:false,//海报双击取消
    selectPagaraphDb:false,//文章双击取消
    selectVedioDb:false,//视频双击取消
    savePosterIndex:-1,//保存临时选择中的数据下标
    savePagaraphIndex:-1,
    saveVedioIndex:-1,
  }),
  components:{
    EditVedio,
    TagGroup,
    commDialog
  },
  created() {
    this.inlayHouseData = JSON.parse(sessionStorage.getItem("inlayHouse"));
    this.noImg = this.noPoster;
    this.noContent = this.noPosterTxt;
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  filters:{
    //视频时长计算时分
   getVedioTimes (str){
      let duration = JSON.parse(str).duration;

      let zero = function(times) {
      return times < 10 ? '0' + times : times;
      }
      let hour = zero(Math.floor(duration / 3600));
      let minutes = zero(Math.floor((duration / 60 % 60)));
      let seconds = zero(Math.floor((duration % 60)));
      let times = ''
      
      if (hour > 0) {
      times += hour+ ' : '
      }
      times += minutes + ' : '
      times += seconds
      
      return times
    }
  },
  mounted() {
    this.$nextTick(()=>{
      let articleCollect = JSON.parse(localStorage.getItem("articleCollect"));
      if(!articleCollect.hasOwnProperty('tabGuide')){
        this.showGuide = true;
        articleCollect.tabGuide = 1;
        localStorage.setItem("articleCollect",JSON.stringify(articleCollect));
      }
    })
  },
  methods: {
    closeGuide(){
      this.showGuide = false;
    },
    //选中楼盘
    selectedRadioHouse(){
      this.selectedHouse = !this.selectedHouse;
    },
    tabHander(type){
      this.saveTabIndex = this.tabIndex = type; 
      if(type==2){
        this.$refs.underline.style.left='5%';
      }else if(type==0){
        this.$refs.underline.style.left='28%';
      }else{
        this.$refs.underline.style.left='51%';
      }  

      this.total = 2;
      this.loading = true;//下拉加载中
      this.finished = false;//下拉结束
      if(this.loading){
        this.onLoad();
      }  
    },
    selectPoster(index,type){
      // if(this.saveTabIndex!=type){
        this.initSelect();
      // }
      if(this.selectedIndex  == index&&this.selectPosterDb){
        this.selectPosterDb = false;
      }else{
        this.selectPosterDb = true;
      }
      this.selectedIndex = index;  
    },
    selectPagaraph(index,type){
      // if(this.saveTabIndex!=type){
        this.initSelect();
      // }
      if(this.selectPagaraphIndex  == index&&this.selectPagaraphDb){
        this.selectPagaraphDb = false;
      }else{
        this.selectPagaraphDb = true;
      }
      this.selectPagaraphIndex = index;
    },
    selectVedio(index,type){
      // if(this.saveTabIndex!=type){
        this.initSelect();
      // }
      if(this.selectVedioIndex  == index&&this.selectVedioDb){
        this.selectVedioDb = false;
      }else{
        this.selectVedioDb = true;
      }
      this.selectVedioIndex = index;
    },
    initSelect(){
      this.selectedIndex = -1;
      this.selectPagaraphIndex = -1;
      this.selectVedioIndex = -1;
      this.selectVedioDb = false
      this.selectPagaraphDb = false;
      this.selectPosterDb = false;
      sessionStorage.removeItem("selectPoster"); 
      sessionStorage.removeItem("selectPagaraph"); 
      sessionStorage.removeItem("selectVedio"); 
    },
    // 加载更多
    async onLoad() {
      this.current = this.getTabIndex();
      this.total = this.getTabTotal();

      if (this.current > this.total) {
        // 加载状态结束
        this.finished = true
        this.loading = false
      } else {
        await this.getAppliedMaterialList()        
        this.loading = false
      }
    },
    //获取楼盘素材数据
    async getAppliedMaterialList(){
      this.current = this.getTabIndex();

      let agentId = this.userInfo.agentId;  

      let res = await discoverService.getAppliedMaterialList({
        agentId:agentId,
        current:this.current,
        size:this.size,
        linkerId:this.inlayHouseData.linkerId,
        type:this.tabIndex
      })
      if(this.tabIndex==2){
        this.posterList.push(...res.records);
        this.total = this.posterTotal = res.pages;          
        this.posterCurrent ++ ;
      }
      else if(this.tabIndex==0){
        this.pagaraphLists.push(...res.records);
        this.total = this.paragraphTotal = res.pages;
        this.paragraphCurrent ++ ;
      }
      else{        
        this.vedioLists.push(...res.records)
        this.total = this.vedioTotal = res.pages;
        this.vedioCurrent ++ ;
      }

    },
    getTabIndex(){
      return this.tabIndex==2?this.posterCurrent:this.tabIndex==0?this.paragraphCurrent:this.vedioCurrent
    },
    getTabTotal(){
      return this.tabIndex==2?this.posterTotal:this.tabIndex==0?this.paragraphTotal:this.vedioTotal
    },
    cancleClickHandler(){
      sessionStorage.removeItem("selectPoster"); 
      sessionStorage.removeItem("selectPagaraph"); 
      sessionStorage.removeItem("selectVedio"); 
      // if(!this.selectedHouse){
        sessionStorage.removeItem("inlayHouse"); 
      // }
      let url = sessionStorage.getItem("discoverEditUrl");
      this.$router.go(-2);
    },
    saveClickHandler(){
      if(!this.selectPosterDb && !this.selectPagaraphDb && !this.selectVedioDb &&! this.selectedHouse){
        this.$toast("请选择需要插入的楼盘或楼盘素材");
        return ;
      } 
      if(this.selectPosterDb){
        sessionStorage.setItem("selectPoster",JSON.stringify(this.posterList[this.selectedIndex])); 
      }
      if(this.selectPagaraphDb){
        sessionStorage.setItem("selectPagaraph",JSON.stringify(this.pagaraphLists[this.selectPagaraphIndex])); 
      }
      
      if(this.selectVedioDb){
        sessionStorage.setItem("selectVedio",JSON.stringify(this.vedioLists[this.selectVedioIndex])); 
      }

      if(!this.selectedHouse){
        sessionStorage.removeItem("inlayHouse"); 
      }
      let url = sessionStorage.getItem("discoverEditUrl");
      //判断选择了新楼盘
      sessionStorage.setItem("selectedHouse","selectedHouse")
      this.$router.go(-2);
    }
  },
}
</script>
<style>
  .van-list__finished-text{
    width: 100%;
  }
  .van-list__loading {
    width: 100%;
  }
</style>

<style lang="less" scoped> 
.scale-1px-hairline--tab-bottom::after{
  background: #CFCFD9;
}
.header-title{
  font-size: 24px;
  color: #333333;
  line-height: 32px;
  font-weight: bold;
}
.insertHouses-radio{
  display: inline-block;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: url();
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.insertHouses-radio-ative{
  background: url();
  background-size: 100% 100%;
}
.insertHouses-radio-position{
  position: absolute;
  right: 16px;
  bottom: 15px;
}
.insertHouses-vedio-position{
  position: absolute;
  right: 16px;
  top: 15px;
}
.meal-market-page-box {
  padding: 16px;
  width: 100%;
  display: flex;
  // margin-top: 17px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
  box-shadow: 0px 2px 4px 0px rgba(206, 209, 214, 0.41);
  &::after{
    content: "";
    position: absolute;
    left:0;
    top:0;
    width: 200%;
    height: 200%;
    border:1px solid #CFCFD9;
    transform-origin: left top;
    transform: scale(0.5); 
  }
  .meal-market-page-box-top-insert {
    display: flex;
    align-items: center;
    li {
      width: 160px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .icon-check {
      flex: 0 0 18px;
      font-size: 18px;
      margin: 0 10px 0 16px;
      &.icon-chat_register_rb_s {
        color: #2f7bdf;
      }
      &.icon-chat_register_rb_n {
        color: #2f7bdf;
      }
      &.disabled {
        color: #333333;
      }
    }
    .meal-market-page-box-top-left {
      width: 120px;
      height: 90px;
      margin-right: 15px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 8px;
      .coupon{
        position: absolute;
        left: 0;
        top: 8px;
        font-size: 12px;
        color: #fff;
        padding: 0 10px 0 5px;
        height: 20px;
        line-height: 20px;
        background-color: #CF562B;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
      }
      .icon-discount {
        width: 36px;
        height: 20px;
        position: absolute;
        top: 4px;
        left: -4px;
        font-size: 11px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 18px;
        text-align: center;
      }
      .icon-play {
        width: 32px;
        height: 32px;
      }
    }
    ul {
      flex: 1;     
      width: auto; 
      li:nth-of-type(1) {
        font-size: 18px;
        font-weight: bold;
        color: #13294F;
        line-height: 26px;
        display: flex;
        justify-content: space-between;
        width: 98%;
        div {
          width: 98%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      li:nth-of-type(2) {
        font-size: 12px;
        font-weight: 400;
        color: #40516F;
        line-height: 15px;
        margin: 7px 0 4px 0;
      }
      li:nth-of-type(3) {
        height: 18px;
        display: flex;
        flex-wrap: wrap;

        .tag-item-statu,
        .tag-item {
          display: inline-block;
          white-space: nowrap;
          font-size: 10px;
          line-height: 17px;
          border-radius: 2px;
          padding: 1px 4px 0;
          text-align: center;
          background: rgba(143, 159, 177, 0.15);
          color: #5c5f66;
        }
        .tag-item {
          background: rgba(143, 159, 177, 0.15);
          color: #5c5f66;
        }
        .blue {
          background: rgba(0, 120, 255, 0.15);
          color: #007AE6;
        }
      }
      // li:nth-of-type(4) {
      //   font-size: 12px;
      //   font-weight: 400;
      //   color: rgba(153, 153, 153, 1);
      //   // line-height: 11px;
      //   margin-top: 12px;
      //   display: flex;
      //   justify-content: space-between;
      // }
      .market_price{
        font-size: 16px;
        color: #E65E2E;
        line-height: 24px;
        font-weight: bold;
        margin-top: 7px;
      }
      .free{
        font-size: 10px;
        width:28px;
        height:15px;
        text-align: center;
        line-height: 15px;
        background:rgba(234,77,46,1);
        border-radius:2px;
        color: #fff;
        border-radius: 2px;
        margin-right: 2px;
        margin-top: 1px;
        vertical-align: middle;
        padding: 0 1px;
      }
    }
  }
  .meal-market-page-box-bottom {
    width: 318px;
    height: 32px;
    display: flex;
    align-items: center;
    background: rgba(247, 249, 250, 1);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(102, 102, 102, 1);
    padding: 7px 7px;
    margin-bottom: 16px;
    margin-left: 16px;
    overflow: hidden;
    img {
      margin-right: 8px;
      width: 16px;
      height: 16px;
    }
  }
}
.insertHouses{ 
  padding-bottom: 59px;
  .insertHouses-header{
     padding: 20px 16px 16px;
    .houser-box{
      margin-top: 17px;
      height: 122px;
    }
  }
  .insertHouses-section{
    // padding: 0 16px 59px;
    // .comm-border-1px-bottom(#CFCFD9);

    .house-tab{
      position: relative;
      display: flex;
      align-items: center;
      padding: 0 16px;
      height: 44px;
      line-height: 44px;
      overflow: hidden;
      // &::after{
      //   content: "";
      //   position: absolute;
      //   left:0;
      //   bottom: 0;
      //   width: 200%;
      //   height: 1px;
      //   border-bottom:1px solid #CFCFD9;
      //   transform-origin: left bottom;
      //   transform: scale(0.5); 
      // }
      .house-tab-item{
        font-size: 14px;
        color: #9CA5B5;
        margin-right: 58px;
        font-weight: bold;
      }
      .underline{
        position: absolute;
        display: block;
        left:20px;
        width: 20px;
        height: 4px;
        border-radius: 2px;
        background: #007AE6;
        bottom: 1px;
      }
      .house-tab-active{
        color: #13284D;
      }
    }
  }
  .insertHouses-wrapper{
    padding: 0 16px;
    overflow: hidden;
    .insertHouses-tips{
      font-size: 12px;
      line-height: 16px;
      color: #9CA5B5;
      margin: 7px 0 16px;
    }
    .insertHouses-lists-img{
      width: 100%;
      > div{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }
      .list-selected{
        outline-style: solid;
        outline-color:#007AE6;
        outline-width:4px;
      }
      .list{
        box-sizing: border-box;
        position: relative;
        width: 163px;
        height: 190px;
        margin-right: 17px;
        margin-bottom: 16px;
        &:nth-child(2n){
          margin-right: 0;
        }
        .poster-img{
          width: 100%;
          height: 100%;
        }        
      }
    }
    .insertHouses-lists-pagaraph{
      .pagaraph-list{
        padding: 16px;
        position: relative;
        display: flex;
        justify-content: space-between;   
        align-items: center;
        margin-bottom: 16px;
        box-shadow: 0px 2px 4px 0px rgba(206, 209, 214, 0.41);
        &::after{
          content: "";
          position: absolute;
          left:0;
          top:0;
          width: 200%;
          height: 200%;
          border:1px solid #CFCFD9;
          transform-origin: left top;
          transform: scale(0.5); 
        }
        .pagaraph-list-content{          
          flex: 1;
          display: flex;
          margin-right: 12px;
          .pagaraph-content{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            max-width: 145px;
            margin-right: 11px;
            .pagaraph-title{
              font-size: 18px;
              line-height: 24px;
              color: #13294F;
              font-weight: bold;
              white-space: pre-wrap;
            }
            .pagaraph-timer{
              font-size: 12px;
              color: #9CA5B5;
              position: relative;
              bottom: -2px;
            }
          }
          .pagaraph-img{
            width: 120px;
            height: 90px;
            border-radius: 6px;
          }
        }     
      }
    }
    .insertHouses-lists-vedio{
      .vedio-list{
        position: relative;
        margin-bottom: 16px;
      }
      .editVedio{
        .editVedio-box{
          position: relative;
          .editVedio-content{
            height: 193px !important;
            position: relative;
            background-position: center;
            background-repeat: no-repeat;      
            background-size: 100% 100%;    
            display: flex;
            justify-content: center;
            align-items: center;
            .vedio-play{
              width: 44px;
              height: 44px !important;
            }
            .editVedio-mask{
              width: 100% !important;
              position: absolute;
              height: 100% !important;
              left: 0;
              top: 0;
              background: linear-gradient(to bottom,rgba(0,0,0,0) 50%, rgba(0,0,0,0.6));
            }
            .editVedio-info{
              position: absolute;
              width: 298px !important;
              left: 50%;
              transform: translateX(-50%);
              top: 140px;
              z-index: 10;
              .editVedio-title{
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-size: 16px;
                font-weight: bold;
                color: #fff;
                line-height: 24px;
              }
              .editVedio-titme{
                display: flex;
                justify-content: space-between;
                font-size: 10px;
                color: #fff;
                line-height: 14px;
              }
            }
          }

        }
      }
    }
    .insertHouses-no{
      text-align: center;
      margin-top: 64px;
      .no-img{
        width: 88px;
        height: 88px;
      }
      .no-content{
        font-size: 12px;
        color: #999999;
        line-height: 17px;
      }
    }
  }

}
 .fixed-bar {
    position: fixed;
    display: flex;
    text-align: center;
    justify-content: space-between;
    background: #fff;
    left: 0;
    right: 0;
    bottom: 0;
    height: 59px;
    padding: 7px 16px 8px;
    z-index: 10;
    &::after{
      content: "";
      position: absolute;
      left:0;
      top: 0;
      width: 200%;
      height: 1px;
      border-bottom:1px solid #CFCFD9;
      transform-origin: left top;
      transform: scale(0.5); 
    }
    > .bar-save-btn{
      width: 164px;
      height: 44px;
      background: #E3E9EF;
      color: #445166;
      font-size: 16px;
      border-radius: 6px;  
      text-align: center;
      line-height: 44px;    
    }
    > .bar-share-btn{
      width: 164px;
      height: 44px;
      background: #007AE6;
      color: #fff;
      font-size: 16px;
      border-radius: 6px;  
      text-align: center;
      line-height: 44px;    
    }
 }
</style>
